<template>
  <el-menu
    class="menu-nav"
    router
    :default-active="currentPath"
    background-color="#20222A"
    text-color="white"
    :collapse="isCollapse"
    :collapse-transition="true"
  >
    <div v-for="(item, index) in menuList" :key="index">
      <el-submenu
        v-if="item.children && item.children.length >= 1"
        :index="item.path"
      >
        <template slot="title">
          <i :class="item.icon"></i>
          <span v-if="isCollapse ? false : true" slot="title">{{
            item.lable
          }}</span>
        </template>
        <el-menu-item
          v-for="kid in item.children"
          :key="kid.index"
          :index="kid.path"
        >
          <i :class="kid.icon"></i>
          <span slot="title">{{ kid.lable }}</span>
        </el-menu-item>
      </el-submenu>

      <el-menu-item v-else :index="item.path">
        <i :class="item.icon"></i>
        <span slot="title">{{ item.lable }}</span>
      </el-menu-item>
    </div>
  </el-menu>
</template>

<script>
export default {
  props: ["isCollapse"],
  data() {
    return {
      currentPath: location.pathname,
      menuList: [],
    };
  },
  methods: {
    //menu data
    gitMenus() {
      this.post("/api/menus")
        .then((res) => {
          console.log(res);
          this.menuList = res.result;
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  mounted() {
    //init menulist
    this.gitMenus();
  },
};
</script>

<style scoped>
.el-menu {
  border: none;
}
.el-menu-item.is-active {
  color: #409eff;
  background-color: rgba(0, 0, 0, 0.8) !important;
}
</style>
